<template>
  <div class="test-container">
    <h2>API连接测试</h2>
    
    <el-card>
      <el-button type="primary" @click="testConnection" :loading="testing">
        测试API连接
      </el-button>
      
      <div v-if="result" class="result">
        <h3>测试结果：</h3>
        <pre>{{ result }}</pre>
      </div>
      
      <div v-if="error" class="error">
        <h3>错误信息：</h3>
        <pre>{{ error }}</pre>
      </div>
    </el-card>
    
    <el-card style="margin-top: 20px;">
      <h3>当前配置：</h3>
      <p><strong>API基础URL：</strong> /api</p>
      <p><strong>代理目标：</strong> http://localhost:8080</p>
      <p><strong>测试端点：</strong> /shishen</p>
      <p><strong>完整URL：</strong> http://localhost:8080/shishen</p>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { shishenApi } from '../api/shishen.js'

const testing = ref(false)
const result = ref(null)
const error = ref(null)

const testConnection = async () => {
  testing.value = true
  result.value = null
  error.value = null
  
  try {
    const response = await shishenApi.getAll()
    result.value = {
      status: '成功',
      data: response,
      timestamp: new Date().toLocaleString()
    }
    ElMessage.success('API连接成功！')
  } catch (err) {
    error.value = {
      status: '失败',
      message: err.message,
      response: err.response?.data,
      statusCode: err.response?.status,
      timestamp: new Date().toLocaleString()
    }
    ElMessage.error('API连接失败')
  } finally {
    testing.value = false
  }
}
</script>

<style scoped>
.test-container {
  padding: 20px;
}

.result, .error {
  margin-top: 20px;
  padding: 15px;
  border-radius: 4px;
  background-color: #f5f5f5;
}

.error {
  background-color: #fff2f0;
  border: 1px solid #ffccc7;
}

.result {
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>